/*
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-15 14:35:24
 * @LastEditors: charles
 * @LastEditTime: 2021-11-15 14:46:26
 */
import {connect} from 'react-redux'
import {createRef} from 'react'
function Todo(props){
  console.log('todos:',props);
  const input_name = createRef();

  const submitHandler = (event)=>{
    event.preventDefault();
    let todo = {
      id:new Date().getTime(),
      name:input_name.current.value
    }
    // 将todo 加入到状态机中
    props.dispatch({type:"ADD_TODO",payload:todo})
  }

  return(
    <div>
      <h2>待办事项</h2>
      {/* 表单 */}
      <form onSubmit={submitHandler}>
        事项：<input type="text" ref={input_name} />
        <input type="submit" value="提交"/>
      </form>
      {/* 列表 */}
      <ul>
        {
          props.todos.list.map(item=>{
            return (
              <li key={item.id}>{item.name}</li>
            )
          })
        }
      </ul>
    </div>
  )
}
export default connect(
  // mapStateToProps => mapState
  ({todos})=>{
    return {
      todos
    }
  }
)(Todo);